<script setup>
import { computed, ref } from "vue";
import { useChat } from "../../../store/chat";

const text = ref("")
const isAllowSend = computed(()=>{
    return text.value === ""
})
const chat = useChat()

const send = () => {
    const msgStr = text.value
    text.value = ""
    chat.send(msgStr)
}
</script>

<template>
    <div class="box">
        <el-input type="textarea" 
            v-model="text"
            style="width: 100%;" :autosize="{ minRows: 3, maxRows: 4 }" resize="none"
            @keyup.enter.exact="send"
            placeholder="请输入内容"
        />
        <el-divider style="margin: 5px 0;"/>
        <div class="operate-row">
            <el-button v-if="chat.loading" type="primary" icon="VideoPause" @click="chat.abort"></el-button>
            <el-button v-else type="primary" icon="Message" :disabled="isAllowSend" @click="send">发送</el-button>
        </div>
    </div>
</template>

<style scoped>
.box {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-color: #40a9ff;
    box-shadow: #40a9ff;
    border-radius: 8px;
}

.operate-row {
    display: flex;
    flex-direction: row;
    justify-content: end;
}
</style>
